<script setup lang="ts">
import usePageStore from "@/store/modules/usePageStore";
const pageStore = usePageStore();
</script>

<template>
  <div>
    <router-link to="/examples/directive/loading">
      <p>1.v-loading(Page Cache,roles admin visitor)</p>
    </router-link>
    <router-link to="/examples/directive/empty">
      <p>2.v-empty</p>
    </router-link>
    <router-link to="/examples/directive/lazy">
      <p>3.v-lazy(Page Cache)</p>
    </router-link>
    <router-link to="/examples/directive/copy">
      <p>4.v-copy</p>
    </router-link>
    <router-link to="/examples/directive/waterMark">
      <p>5.v-waterMark</p>
    </router-link>

    <router-link to="/login">
      <p>login</p>
    </router-link>
    <PageTransition />
  </div>
</template>

<style lang="scss">
.title {
  margin-bottom: 20px;
}
.btns {
  .btn {
    margin-right: 20px;
  }
}
.module {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin-bottom: 20px;
  overflow: scroll;
}
.image-item {
  width: 250px;
  height: 250px;
  margin: 20px;
}
</style>

<route>
{
  meta: {
    transition: {
      enter: 'fadeIn',
      leave: 'fadeOut'
    }
  }
}
</route>
